<template>
  <div class="g-wrap clearFixed">
    <div class="head-bar clearFixed">
      <img src="../../../public/img/lol_03.jpg" alt />
    </div>
    <div class="g-main clearFixed">
      <div class="m-nav clearFixed">
        <el-tabs class="clearFixed" v-model="activeName" @tab-click="handleClick">
          <el-tab-pane v-for="ele in data.data" :key="ele.id" :label="ele.title" :name="ele.name">
            <div class="v-waterfall-content" id='v-waterfall'>
              <div v-for="(img,index) in waterfallList" :key="index" class="v-waterfall-item"  :style="{top:img.top+'px',left:img.left+'px',width:waterfallImgWidth+'px',height:img.height}" v-show="index<num" >
                <!-- <img :src="img.src"/> -->
                <el-image  :src="img.src"  :lazy="true"  />
              </div>
              <div class="desc">
                <h3>英雄</h3>
                <h2>英雄剖析:赛娜</h2>
                <div class="desc-text">远不止某位仁兄死去的老婆。</div>
                <div class="uinfo">
                  <span>由Riot Cashmiir</span>
                  <span>——</span>
                  <span>2周前</span>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <!-- <el-tab-pane label="开发者" name="second"></el-tab-pane>
          <el-tab-pane label="问拳头" name="third"></el-tab-pane>
          <el-tab-pane label="游戏" name="fourth"></el-tab-pane>
          <el-tab-pane label="英雄" name="fifth"></el-tab-pane>
          <el-tab-pane label="皮肤" name="sixth"></el-tab-pane>
          <el-tab-pane label="叙述" name="seventh"></el-tab-pane>
          <el-tab-pane label="艺术" name="eighth"></el-tab-pane>-->
        </el-tabs>
        <el-button plain class="btn" @click="moreText" ref="location">{{msg}}</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import data from './index'
// console.log(data.data)
export default {
  data: () => ({
    isshow: false, // 控制图片上文字显示的内容
    arr: [], // 按钮控制可视的图片
    num: 5, // 控制图片显示的数量
    msg: '加载更多', // 按钮显示的文字
    ismore: false, // 控制按钮显示的文字
    activeName: 'second', // 控制页面上tab栏默认显示第几个
    data, // 标签栏及图片地址
    waterfallList: [], // 存放计算好的数据
    waterfallImgWidth: 400, // 每一列的宽度
    waterfallImgCol: 3, // 多少列
    waterfallImgRight: 0, // 右边距
    waterfallImgBottom: 0, // 下边距
    waterfallDeviationHeight: [] // 存放瀑布流各个列的高度
  }),
  created () {
  },
  mounted () {
    // var top = document.querySelectorAll('.v-waterfall-item')
    // console.log(top)
    this.calculationWidth(data.data[1].src)
    // console.log(this.waterfallDeviationHeight.length)
  },
  updated () {
  },
  methods: {
    handleClick (tab, event) {
      // console.log(tab.index)
      this.$router.push('/developer/all/' + tab.index)
      // this.calculationWidth(data.data[tab.index].src)
    },
    // 计算每个图片的宽度或者是列数
    calculationWidth (imgList) {
      let domWidth = document.getElementById('v-waterfall').offsetWidth
      if (!this.waterfallImgWidth && this.waterfallImgCol) {
        this.waterfallImgWidth = (domWidth - this.waterfallImgRight * this.waterfallImgCol) / this.waterfallImgCol
      } else if (this.waterfallImgWidth && !this.waterfallImgCol) {
        this.waterfallImgCol = Math.floor(domWidth / (this.waterfallImgWidth + this.waterfallImgRight))
      }
      // 初始化偏移量高度数组
      this.waterfallDeviationHeight = new Array(this.waterfallImgCol)
      for (let i = 0; i < this.waterfallDeviationHeight.length; i++) {
        this.waterfallDeviationHeight[i] = 0
      }
      this.imgPreloading(imgList)
    },
    // 图片预加载,获取图片的宽和高
    imgPreloading (imgList) {
      for (let i = 0; i < imgList.length; i++) {
        let aImg = new Image()
        aImg.src = imgList[i]
        aImg.onload = aImg.onerror = (e) => {
          let imgData = {}
          // 根据设定的列宽度求出图片的宽度
          imgData.height = this.waterfallImgWidth / aImg.width * aImg.height
          imgData.src = imgList[i]
          this.waterfallList.push(imgData)

          this.rankImg(imgData)
        }
      }
    },
    // 计算图片偏移量
    rankImg (imgData) {
      let{ waterfallImgWidth, waterfallImgRight, waterfallImgBottom, waterfallDeviationHeight } = this
      // 找出当前最短列的索引
      let minIndex = this.waterfallDeviationHeight.indexOf(Math.min.apply(null, this.waterfallDeviationHeight))
      // 获取最短列底部高度,即下一张图片的顶部高度
      imgData.top = waterfallDeviationHeight[minIndex]
      // 计算左侧偏移,最短列索引*(右边距+列宽度)
      imgData.left = minIndex * (waterfallImgRight + waterfallImgWidth)
      // 改变当前列的宽度
      waterfallDeviationHeight[minIndex] += imgData.height + waterfallImgBottom
    },
    moreText () {
      this.num = this.num + 5
      console.log(this.num)
      if (this.num >= this.waterfallList.length) {
        this.num = this.waterfallList.length
        this.ismore = true
      }
      this.msg = this.ismore ? '全部完成' : '加载更多'

      // 计算button的top值 需要注意这里有一点点bug
      for (let i = 0; i < this.num; i++) {
        console.log(this.waterfallList.length)
        if (this.waterfallList[i].top !== undefined && this.arr.indexOf(this.waterfallList[i].top + this.waterfallList[i].height) === -1) {
          this.arr.push(this.waterfallList[i].top + this.waterfallList[i].height + 2)
        }
      }
      let maxIndex = this.arr.indexOf(Math.max.apply(null, this.arr))
      this.$refs.location.$el.style.top = this.$refs.location.$el.offsetHeight + 130 + this.arr[maxIndex] + 'px'
    }
  }
}
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.g-wrap {
  font-family: "\5FAE\8F6F\96C5\9ED1";
  min-width: 1200px;
  line-height: 1;
  background: #1b2128;
  height: 100%;
  .head-bar {
    padding: 40px 0 20px;
  }
  .g-main {
    margin: 0 40px 150px;
    border: 1px solid #35312a;
    position: relative;
    .m-nav {
      transition: 0.3s;
      position: relative;
      width: 100%;
      // height: 68px;
      border-bottom: 1px solid #35312a;
      text-align: center;
    }
  }
}
</style>
